<template>
  <div class="AnchorUp">
    <div class="searchBox">
      <span class="txt">主播身份：</span>
      <el-select v-model="identity" size="small" placeholder="请选择性别">
        <el-option label="不限" value=""> </el-option>
        <el-option label="认证主播" value="1"> </el-option>
        <el-option label="工会主播" value="2"> </el-option>
        <el-option label="平台合作主播" value="3"> </el-option>
      </el-select>
      <span class="margin"></span>
      <span class="txt">性别：</span>
      <el-select v-model="sex" size="small" placeholder="请选择性别">
        <el-option label="不限" value=""> </el-option>
        <el-option label="男" value="1"> </el-option>
        <el-option label="女" value="2"> </el-option>
      </el-select>
      <span class="margin"></span>
      <el-button size="small" class="btn" @click="search">查询</el-button>
    </div>
    <el-card>
      <div class="typeBox">
        <el-radio-group
          size="small"
          v-model="type"
          @change="typeChange"
          fill="#7b94d8"
        >
          <el-radio-button label="1">未考核</el-radio-button>
          <el-radio-button label="2">已考核</el-radio-button>
          <el-radio-button label="3">称号设置</el-radio-button>
        </el-radio-group>
        <div>
          <!-- 自动审核
          <el-switch
            v-model="auto"
            active-color="#13ce66"
            inactive-color="#ccc"
            active-value="1"
            inactive-value="0"
          >
          </el-switch> -->
          <el-button v-if="type == 3" size="small" @click="addLable"
            >新增标签</el-button
          >
        </div>
      </div>
      <el-table
        v-if="type != 3"
        v-loading="loading"
        :data="tableData"
        style="width: 100%; margin-top: 10px"
        :header-cell-style="{ background: '#f5f7fa' }"
        @selection-change="handleSelectionChange"
      >
        <el-table-column prop="id" label="考试时间"> </el-table-column>
        <el-table-column prop="credit" label="心动值"> </el-table-column>
        <el-table-column prop="call_time" label="通话时长"> </el-table-column>
        <el-table-column prop="diamond" label="宝石收益"> </el-table-column>
        <el-table-column prop="identity" label="身份"> </el-table-column>
        <el-table-column prop="user_id" label="用户ID"> </el-table-column>
        <el-table-column prop="id" label="当前称号"> </el-table-column>
        <el-table-column prop="id" label="升级后称号"> </el-table-column>
        <el-table-column prop="id" label="升级后提现比"> </el-table-column>
        <el-table-column prop="id" label="操作" width="250">
          <template slot-scope="scope">
            <el-button
              type="info"
              size="mini"
              @click="nopass(scope.row.id)"
              plain
              >不通过</el-button
            >
            <el-button
              type="success"
              size="mini"
              @click="pass(scope.row.id)"
              plain
              >通 过</el-button
            >
            <el-button
              type="primary"
              size="mini"
              @click="detail(scope.row.id)"
              plain
              >详 情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-if="type != 3"
        :total="total"
        :page.sync="page"
        :limit.sync="pageSize"
        @pagination="getList"
      />
      <el-table
        v-if="type == 3"
        v-loading="loading"
        :data="tableData"
        style="width: 100%; margin-top: 10px"
        :header-cell-style="{ background: '#f5f7fa' }"
        @selection-change="handleSelectionChange"
      >
        <el-table-column prop="upgrade_num" label="心动值"> </el-table-column>
        <el-table-column prop="draw_rate" label="提现比例">
          <template slot-scope="scope">
            {{ scope.row.draw_rate + "%" }}
          </template>
        </el-table-column>
        <el-table-column prop="man_title" label="称号（男）"> </el-table-column>
        <el-table-column prop="women_title" label="称号（女）">
        </el-table-column>
        <el-table-column prop="color" label="称号颜色">
          <template slot-scope="scope">
            <el-color-picker
              disabled
              v-model="scope.row.color"
            ></el-color-picker>
          </template>
        </el-table-column>
        <el-table-column prop="level" label="等级"></el-table-column>
        <el-table-column prop="reward" label="通话收益"></el-table-column>
        <el-table-column prop="icon" label="称号icon">
          <template slot-scope="scope">
            <el-image
              v-if="scope.row.icon"
              style="width: 50px; height: 50px"
              :src="scope.row.icon"
              :preview-src-list="[scope.row.icon]"
            >
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="id" label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="edit(scope.row)" plain
              >修 改</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 反馈 -->
    <el-dialog title="反馈" :visible.sync="dialogVisible" width="30%">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="驳回理由">
          <el-radio-group
            v-model="form.quick"
            @change="form.reason = form.quick"
          >
            <el-radio label="心动值低">心动值低</el-radio>
            <el-radio label="通话时长低">通话时长低</el-radio>
            <el-radio label="拒绝次数过多">拒绝次数过多</el-radio>
            <el-radio label="">手动输入理由</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-show="!form.quick" label="">
          <el-input placeholder="请输入理由" v-model="form.reason"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitNopass">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改标签 -->
    <el-dialog title="反馈" :visible.sync="dialogVisible1" width="30%">
      <el-form ref="form1" :rules="rules" :model="form1" label-width="100px">
        <el-form-item label="心动值" prop="cardiacValue">
          <el-input
            placeholder="请输入"
            clearable
            v-model="form1.upgrade_num"
          ></el-input>
        </el-form-item>
        <el-form-item label="提现比例" prop="rate">
          <el-input
            placeholder="请输入"
            clearable
            v-model="form1.draw_rate"
            style="width: 95%"
          ></el-input>
          %
        </el-form-item>
        <el-form-item label="男称号" prop="men">
          <el-input
            placeholder="请输入"
            clearable
            v-model="form1.man_title"
          ></el-input>
        </el-form-item>
        <el-form-item label="女称号" prop="women">
          <el-input
            placeholder="请输入"
            clearable
            v-model="form1.women_title"
          ></el-input>
        </el-form-item>
        <el-form-item label="等级" prop="level">
          <el-input
            placeholder="请输入"
            clearable
            v-model="form1.level"
          ></el-input>
        </el-form-item>
        <el-form-item label="通话收益" prop="reward">
          <el-input
            placeholder="请输入"
            clearable
            v-model="form1.reward"
          ></el-input>
        </el-form-item>
        <el-form-item label="颜色" prop="color">
          <div class="center">
            <el-input
              placeholder="请输入"
              clearable
              v-model="form1.color"
              style="width: 90%"
            ></el-input>
            <el-color-picker v-model="form1.color"></el-color-picker>
          </div>
        </el-form-item>
        <el-form-item label="icon" prop="icon">
          <el-upload
            class="avatar-uploader upLoadBox"
            :http-request="upLoad"
            :show-file-list="false"
            action
          >
            <img v-if="form1.icon" :src="form1.icon" class="img" />
            <i v-else class="el-icon-plus avatar-uploader-icon img"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="submitEdit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination"; // 分页
import {
  AttestationUserAuchorUpRecord,
  reputationLableList,
  reputationEditLableList,
  reputationAddLableList,
} from "@/api/AuditManagement";
import { client } from "@/utils/oss.js";
import { ossToken } from "@/api/NotificationManagement";
export default {
  components: { Pagination },
  data() {
    return {
      identity: "",
      sex: "",
      id: "",
      type: "1",
      auto: "0",
      loading: false,
      tableData: [{}],
      total: 0,
      page: 1,
      pageSize: 10,
      dialogVisible: false,
      form: {
        quick: "1",
        reason: "",
      },
      dialogVisible1: false,
      form1: {
        upgrade_num: "",
        draw_rate: "",
        man_title: "",
        women_title: "",
        color: "",
        icon: "",
        id: "",
        reward: "", //通话收益
        level: "", //等级
      },
      bableType: 1,

      rules: {
        level: [{ required: true, message: "等级不能为空！", trigger: "blur" }],
        reward: [
          { required: true, message: "通话收益不能为空！", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    search() {
      this.page = 1;
      this.getList();
    },
    async getList() {
      this.loading = true;
      const res = await AttestationUserAuchorUpRecord({
        state: this.type,
        identity: this.identity,
        sex: this.sex,
        id_code: this.id,
        page: this.page,
        pageSize: this.pageSize,
      });
      this.loading = false;
      if (res.code == 0) {
        this.tableData = res.data.list;
        this.total = parseInt(res.data.total);
      }
    },
    submitNopass() {},
    nopass(id) {
      this.dialogVisible = true;
    },
    pass(id) {
      this.$confirm("是否通过该审核?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "操作成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    detail(id) {},
    addLable() {
      this.form1 = {
        upgrade_num: "",
        draw_rate: "",
        man_title: "",
        women_title: "",
        color: "",
        icon: "",
        id: "",
        reward: "0", //通话收益
        level: "0", //等级
      };
      this.bableType = 1;
      this.dialogVisible1 = true;
    },
    edit(obj) {
      this.form1.upgrade_num = obj.upgrade_num;
      this.form1.draw_rate = obj.draw_rate;
      this.form1.women_title = obj.women_title;
      this.form1.man_title = obj.man_title;
      this.form1.id = obj.id;
      this.form1.color = obj.color;
      this.form1.icon = obj.icon;
      this.bableType = 2;
      this.form1.reward = obj.reward ? obj.reward : 0; //通话收益
      this.form1.level = obj.level ? obj.level : 0; //等级
      this.dialogVisible1 = true;
      console.log(obj.reward, "66666");
    },
    async submitEdit() {
      if (this.bableType == 2) {
        const res = await reputationEditLableList(this.form1);
        if (res.code == 0) {
          this.$message.success("修改成功！");
          this.dialogVisible1 = false;
          this.getReputationLableList();
        }
      }
      if (this.bableType == 1) {
        const res = await reputationAddLableList(this.form1);
        if (res.code == 0) {
          this.$message.success("新增成功！");
          this.dialogVisible1 = false;
          this.getReputationLableList();
        }
      }
    },
    async upLoad(file, obj) {
      //   console.log(obj);
      await ossToken({
        type: 0,
      }).then((res) => {
        if (res.code == 0) {
          this.dataObj = {
            accessKeyId: res.data.accessKey,
            accessKeySecret: res.data.accessSecret,
            securityToken: res.data.token,
            region: "oss-" + res.data.regionId,
            bucket: res.data.bucket,
          };
        }
      });
      const self = this;
      try {
        let fileNames =
          "/img/" +
          Math.round(new Date() / 1000) +
          "." +
          file.file.name.substring(file.file.name.lastIndexOf(".") + 1);
        //fileNames上传文件的名称
        //file.file上传文件的内容
        let cli = client(this.dataObj);
        let result = cli.multipartUpload(fileNames, file.file);
        result.then(() => {
          self.form1.icon = "https://img.psychexy.com" + fileNames;
          self.$message({
            message: "上传成功",
            type: "success",
          });
        });
      } catch (e) {
        self.$message.error("上传失败");
      }
    },
    typeChange() {
      if (this.type == "1" || this.type == "2") {
        this.search();
      }
      if (this.type == "3") {
        this.getReputationLableList();
      }
    },
    async getReputationLableList() {
      this.loading = true;
      const res = await reputationLableList({
        page: 1,
        pageSize: 100,
      });
      this.loading = false;
      if (res.code == 0) {
        this.tableData = res.data.list;
      }
    },
  },
  created() {
    this.getList();
  },
};
</script>

<style lang="less" scoped>
.AnchorUp {
  padding: 20px;
  .searchBox {
    display: flex;
    align-items: center;
    margin: 20px 0;
    .margin {
      margin: 0 10px;
    }
    .txt {
      display: inline-block;
      height: 32px;
      background-color: #f5f7fa;
      line-height: 32px;
      padding-left: 10px;
      color: #9d9399;
      border-radius: 4px 0 0 4px;
      border: 1px solid #dcdfe6;
      border-right: none;
    }
    /deep/ .el-input__inner {
      border-radius: 0 4px 4px 0 !important;
    }
    .el-input {
      width: 180px;
    }
  }
  .typeBox {
    display: flex;
    justify-content: space-between;
  }
  .center {
    display: flex;
    align-items: center;
  }
  .upLoadBox {
    .img {
      width: 200px;
      height: 200px;
    }
    .el-icon-plus {
      width: 200px;
      height: 200px;
      line-height: 200px;
      border: 1px dashed #ccc;
    }
  }
}
</style>